<template>
  <div class="body">
      <div class="neir">
        <h2 class="wercome">欢迎登录</h2>
        <img class="dog" src="../../assets//images/login/cat.gif" alt="一只小狗">
        <div class="logintext">
          <div class="input">
            <span>用户名：</span>
            <el-input placeholder="请输入用户名"  @input="handleruser" v-model="inputUser" clearable>
            </el-input>
            <p class="received" v-if="nullUse">用户名不能为空！</p>
          </div>
          <div class="input">
            <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
            <el-input placeholder="请输入密码"  @input="handlerPas" v-model="inputPasd" show-password>
            </el-input>
           <p class="received" v-if="nullPas">请输入密码！</p>
          </div>
          <div class="inputyz">
            <span>验证码：</span>
            <el-input placeholder="验证码"  @input="handlerYzm"  v-model="inputyz" clearable></el-input>
            <span class="zw"></span>
            <p class="received outlook" @click="outlook">看不清？点击换一张！</p>
            <p class="received" v-if="errorYz">验证码输入错误，重新输入!</p>
            <p class="received" v-if="nullYz">请输入验证码！</p>
          </div>
          <canvas class="yzm" id="c1" @click="qiehuan" title="看不清？换一张">
  
          </canvas>
          <el-row>
            <el-button type="primary" @click="button">登录</el-button>
            <div class="toRegister"><router-link to="/register">没有账号？去注册</router-link></div>
          </el-row>
        </div> 
      </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    data(){
      return{
        inputUser:"",//用户名
        inputPasd:"",//密码
        inputyz:"",//验证码
        Number:[],//存放随机数组
        ctx:"",//canvas
        Byid:"",//获取canvas的id
        height:"",//canvas的高
        width:"",//canvas的宽
        errorYz:false,//验证码是否正确
        nullYz:false,//验证码是否为空
        nullUse:false,//用户名是否为空
        nullPas:false,//密码是否为空
        err:false,//用户名或密码输入是否正确
        user:"",
      }
    },
    mounted(){
      // console.log($)
      this.Verification()
    },
    methods:{
      Verification(){//使用随机数实现验证码
        this.Byid=document.getElementById("c1");
        this.ctx=this.Byid.getContext("2d");
        // canvas宽高
        var myCanvas_rect = this.Byid.getBoundingClientRect()
        this.ctx.font="45px Arial";
        // this.ctx.fillText("Y",10,70);
        for(var j=0;j<4;j++){
          // 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
          var array = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
                           '0','1','2','3','4','5','6','7','8','9' );//数组
          var i = Math.floor(Math.random()*36)//一到62取一个随机数
          var num = array[i]
          var n = Math.floor(Math.random()*20)
          this.ctx.fillText(num,50+j*(n+40),(60+n)+3*j);//将随机数绘制到画布上
          // console.log(n)
          if(n==0){
             this.ctx.font= (n+30)+"px Arial";
          }
          else if(n<3){
             this.ctx.font= (n*25)+"px Arial";
          }
          else if(n<5){
            this.ctx.font= (n*10)+"px Arial";
          }
          else if(n<10){
            this.ctx.font= (n+20)+"px Arial";
          }
          else
            this.ctx.font= n*3+"px Arial";
            // console.log(num)
            this.Number[j] = num//将每次的num赋值给数组存储
        }
        // console.log("执行")
        // console.log(this.Number)
      },
      outlook(){//看不清，点击换一张
        this.qiehuan()
      },
      qiehuan(){//看不清换一张
        this.errorYz = false;
        this.nullYz = false;
        var myCanvas = document.getElementById('c1');
        // var myCanvas_rect = myCanvas.getBoundingClientRect();
        // this.height = myCanvas_rect.height;
        // this.width = myCanvas_rect.width;
        this.Number = []//清空上次画布上的随机数
        this.ctx=this.Byid.getContext("2d");
        this.ctx.clearRect(0,0,600,400);//清空画布内容
         this.Verification()//调用Verification（）重新生成随机数
        //  console.log(this.Number)
      },
      button(){//登录按钮
        this.errorYz = false;
        this.nullYz = false;
        this.err = false;
        this.nullUse = false
        this.nullPas = false
        // console.log(this.inputUser)
        if(this.inputUser==""){
          this.Byid.style.top = "40%"
        }
        else if(this.inputUser!=""&&this.inputPasd!=""){
           this.Byid.style.top = "36%"
        }
        let sun = ""
        for(var i=0;i<this.Number.length;i++){
          sun += this.Number[i]//将数组中的随机数转换成字符串
        }
        
        // if(this.inputUser!="姜姜"&&this.inputUser!=""&&this.inputPasd!=""&&this.inputPasd!="jly123456"&&sun==this.inputyz){//用户名或密码错误
        //   this.err = true
        //   this.$alert('用户名或密码错误，请重新输入',  {
        //     confirmButtonText: '确定',
        //     callback: action => {
        //       // this.$message({
        //       //   type: 'info',
        //       //   message: `action: ${ action }`
        //       // });
        //       this.Number = []//清空上次画布上的随机数
        //       this.ctx=this.Byid.getContext("2d");
        //       this.ctx.clearRect(0,0,600,400);//清空画布内容
        //       this.Verification()//调用Verification（）重新生成随机数
        //     }
        //   });
        // }
        if(this.inputUser==""){//用户名输入为空
          this.nullUse = true
        }
        if(this.inputPasd==""){//密码输入为空
          this.nullPas = true
        }
        if(sun!=this.inputyz&&this.inputyz!=""){//验证码输入错误
          this.errorYz = true
          // this.inputyz = ""
          this.Number = []//清空上次画布上的随机数
          this.ctx=this.Byid.getContext("2d");
          this.ctx.clearRect(0,0,600,400);//清空画布内容
          this.Verification()//调用Verification（）重新生成随机数
        }
        if(this.inputyz==""){//验证码输入框为空
          this.nullYz = true
        }
        // 用户输入正确
        if(this.inputUser!=""&&this.inputPasd!=""&&sun==this.inputyz){
          this.user = {
            username:this.inputUser,
            password:this.inputPasd
          }
          axios({
            headers:{ 'Content-Type':'application/x-www-form-urlencoded'},
            method: 'post',
            url: "http://localhost/project/liulang/logon/login.php",
            data:this.user,
            dataType:"Json"
          }).then(res=>{
            console.log(res)
            if(res.data==0){//用户名或密码错误
                this.err = true
                this.$alert('用户名或密码错误，请重新输入',  {
                  confirmButtonText: '确定',
                  callback: action => {
                    // this.$message({
                    //   type: 'info',
                    //   message: `action: ${ action }`
                    // });
                    this.Number = []//清空上次画布上的随机数
                    this.ctx=this.Byid.getContext("2d");
                    this.ctx.clearRect(0,0,600,400);//清空画布内容
                    this.Verification()//调用Verification（）重新生成随机数
                    this.inputUser = "";
                    this.inputPasd = "";
                    this.inputyz = "";
                  }
                });
            }
            else{
              this.$router.push({ path:'/index'  })
            }
          })
        }
      },
      handleruser(e){//监听用户名输入框是否为空
        if(e!=""){
          this.nullUse = false
          this.Byid.style.top = "37%"
        }
      },
      handlerPas(e){//监听密码输入框是否为空
        if(e!=""){
          this.nullPas = false
          this.Byid.style.top = "35%"
        }
      },
      handlerYzm(e){//监听验证码输入框是否为空
        if(e!=""){
          this.nullYz = false
          this.errorYz = false
          this.Byid.style.top = "33%"
        }
      },
    }
}
</script>

<style lang="scss">
*,html,body{
    margin: 0;
    padding: 0;
    border: 0;
    /* background: rgb(233, 233, 252); */
  }
  .body{
    text-align: center;
    top: 0;
    position: absolute;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: #ccc; */
    /* border: 1px solid #ccc; */
    .neir{
      padding-top: 5px;
      /* background: #ccc; */
      margin: 6vh auto;
      height: 90vh;
      width: 80vw;
      // border: #ccc 1px solid;
      // border-radius: 18px;
      box-shadow: 0 0 3px rgb(53, 53, 53);
      .wercome{
        margin-top: 5vh;
        font-size: 2em;
        color:#16173f
      }
      .dog{
        width: auto;
        /* height: auto; */
        position: relative;
        left: -20%;
        top:31vh ;
      }
      .logintext{
        position: relative;
        top: -27vh;
        left: 33%;
        /* background: #ccc; */
        // border: 1px solid #ccc;
        border-radius: 13px;
        box-shadow: 0 0 9px rgb(53, 53, 53);
        width: 30vw;
        height: 50vh;
        padding-top: 6vh;
        .el-input{
          width: 20vw;
        }
        .input{
          margin-bottom: 2vh;
        }
        .inputyz{
          .el-input{
            width: 8vw;
          }
          .zw{
            // border: 1px solid #ccc;
            display: inline-block;
            width: 11.5vw;
            // height: 8vh;
          }
          .outlook{
            cursor: pointer;
          }
        }
        .yzm{
          border: 1px solid #ccc;
          width: 11.5vw;
          height: 10vh;
          position: absolute;
          top: 36%;
          right:9%;
          cursor: pointer;
        }
        .el-button{
          border: 1px sloid #000;
          width: 85%;
          position: absolute;
          top: 10vh;
          left: 6%;
        }
        .toRegister{
          position: absolute;
          top: 16vh;
          left: 35%;
        }
      }
    }
    .received{
      margin-top: 0.5vh;
      padding-left:4vw ;
      // border: 1px solid #ccc;
      text-align: left;
      font-size: 9px;
      color: #f00;
    }
  }
</style>